<template>
    <div>
        <h3>需求：自适应高度1</h3>
        <img src="@/assets/timu3.png" width="40%" alt="">
        <hr>
        <div class="box stretch">
            <div class="m1" ref="m1">
                <p>模块1内容1</p>
                <p>模块1内容2</p>
                <p>模块1内容3</p>
            </div>
            <div class="m2" ref="m2">
                <p>模块2内容1</p>
            </div>
            <div class="m3" ref="m3">
                <p>模块3内容1</p>
                <p>模块3内容2</p>
                <p>模块3内容3</p>
                <p>模块3内容4</p>
                <p>模块3内容5</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Interview3_1"
    }
</script>

<style scoped>
    .box {
        width: 800px;
        background: #f0f0f0;
        margin: 50px auto;
        display: flex;
        justify-content: center;
        /*align-items: stretch;  !*默认值：如果弹性子元素没有高度或高度为auto，将占满整个容器的高度*!*/
    }
    .box>div {
        border: 3px solid #333;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 28px;
        color: #fff;
        text-align: center;
    }
    .m1 {
        width: 200px;
        background: pink;
        transition: height 1s linear;
    }
    .m2 {
        flex:1;
        background: deepskyblue;
        transition: height 1s linear;
    }
    .m3 {
        width: 300px;
        background: #007ba5;
        transition: height 1s linear;
    }
</style>